<template>
	<view class="contenting">
		<!-- 查询模块 -->
		<Search></Search>
		<!-- 为你优选 -->
		<Preference :preferData="preferData"></Preference>
		<!-- 附近商家 -->
		<Title></Title>
		<!-- 筛选模块 -->
		<view @click="poll()">
			<Delicacy id="meuiFixed" :class="{is_fixed:isFixed}"></Delicacy>
		</view>
		
		<Takeout></Takeout>
	</view>
</template>

<script>
	//组件的导入
	import Search from "./components/search.vue"
	import Takeout from "./components/takeout.vue"
	import Preference from "./components/preference.vue"
	import Delicacy from "./components/delicacy.vue"
	import Title from "./components/title.vue"
	import {
		onPerfer
	} from '../../api/api.js'
	export default {
		data() {
			return {
				title: 'Hello',
				preferData: [],
				menutop:"",
				rect:"",
				isFixed:false,
				
			}
		},
		components: {
			Search,
			Takeout,
			Preference,
			Delicacy,
			Title,
		},
		onLoad() {
			//监听筛选组件距离顶部的距离
			const query = wx.createSelectorQuery();
			query.select("#meuiFixed").boundingClientRect();
			query.exec((res)=>{
				console.log("组件距离顶部的高度",res[0].top)
				this.menutop=res[0].top
			})
			
		},
		methods: {
			//点鸡筛选组件置顶
			poll(){
				//小程序提供的方法
				
				wx.pageScrollTo(
				{
					scrollTop:this.menutop+2,
					duration:100, //时间
				})
			},
			//=========api=======
			getPrefer() {
				onPerfer("forshop/getprefer").then((res) => {
					console.log(res)
					uni.showToast({
						title: "获取数据成功",
						duration: 2000
					});
					this.preferData = res
				}).catch((err) => {
					console.log(err)
					uni.showToast({
						icom: 'none',
						title: "系统在开小差",
						duration: 2000
					});
				})
			}

		},
		mounted() {
			this.getPrefer()
		},
		
		
		onPageScroll(e){
			console.log("监听页面滚动的距离",e.scrollTop)
			this.rect =e.scrollTop
		},
		
		computed:{
			namePage(){
				console.log("我是自动执行的");
				//如果页面滚动的高度大于组件距离顶部的高度
				if(this.rect > this.menutop){
					console.log("置顶")
					this.isFixed=true;
					
				}else{
					console.log("不置顶")
					this.isFixed=false;
				}
				
			}
		}
	}
</script>

<style scoped>
	.contenting {
		margin: 0 15upx;
	}
		
	.is_fixed{
		position: fixed;
		top:0;
		left: 0;
		right: 0;
	}
</style>
